<template>
    <el-dialog :visible.sync="modelValue" width="30%" :title="'换模版'" append-to-body :modal-append-to-body="false"
        :close-on-click-modal="false" top="5vh" @close="close">
        <div class="dialog-content">
            <div class="dialog-content-body">
                <div class="mr5">
                    <template v-if="listData && listData.length > 0">
                        <div :class="['list-cell', 'flex_between', currInfo.id == item.id ? 'active' : '']"
                            v-for="(item, index) in listData" :key="index" @click="chooseHandle(item)">
                            <div class="flex1">
                                <h3 class="font_black2">{{ item.title || '--' }}</h3>
                            </div>
                            <img v-if="currInfo.id == item.id" class="selete_img" src="static/icon/select.svg" alt="">
                        </div>
                    </template>
                    <empty v-else-if="listData && listData.length == 0" />
                    <div class="flex_center" v-if="listData && listData.length > 0">
                        <div class="mt10 mb20"> 暂无更多数据~ </div>
                    </div>
                </div>
            </div>
            <div class="flex_center dialog-content-footer">
                <el-button @click="close" size="small" style="width: 150px;"> 取 消 </el-button>
                <el-button type="primary" @click="submitHandle" size="small" style="width: 150px;"> 确 定 </el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps, defineExpose, nextTick, defineEmits } from '@vue/composition-api'
import config from "@/js/conf/Config.js"

const { proxy } = getCurrentInstance()
const modelValue = ref(false)
const loading = ref(false)
const currInfo = ref({})
const emit = defineEmits(['success-handle'])

const props = defineProps({
    propData: {
        type: Object,
        default: () => { }
    }
})

// 提交保存
const submitHandle = async () => {
    let idType = currInfo.value.type
    let subId = currInfo.value.id
    let propData = props.propData
    console.log('currInfo.value', currInfo.value)
    console.log('propData', propData)
    let params = {
        id_cg: idType == 'cg' ? subId : propData.tpl['cg']?.id,
        id_ck: idType == 'ck' ? subId : propData.tpl['ck']?.id,
        id_db: idType == 'db' ? subId : propData.tpl['db']?.id,
        id_rk: idType == 'rk' ? subId : propData.tpl['rk']?.id,
        id_xs: idType == 'xs' ? subId : propData.tpl['xs']?.id,
        id_yy: idType == 'yy' ? subId : propData.tpl['yy']?.id,
        id_dz: propData.tpl['dz']?.id,
        paper_w: propData.paper_w,
        qrcode_i: propData.qrcode_i,
        txt_img: propData.txt_img
    }
    try {
        let res = await proxy.$api({ url: config.compset_print_set_save, data: params })
        if (res.status == 1) {
            emit('success-handle', currInfo.value)
            proxy.$message({
                message: '保存成功',
                type: 'success',
            })
            close()
        }
    } catch (error) { }
}

const listData = ref([])
const getDevsetList = async (item) => {
    try {
        loading.value = true
        let res = await proxy.$api({ url: config.compset_print_tpl_ls, data: { type: item.type } });
        if (res.status == 1) {
            let list = res?.data || []
            if (list && list.length > 0) {
                listData.value = listData.value.concat(list || [])
            }
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

const chooseHandle = (item) => {
    currInfo.value.id = item.id
}

const open = (parame) => {
    listData.value = []
    currInfo.value = parame
    modelValue.value = true
    nextTick(() => {
        getDevsetList(parame)
    })
}

const close = () => {
    modelValue.value = false
}

onMounted(() => { })
onBeforeUnmount(() => { })
onUnmounted(() => { })
defineExpose({
    open,
    close
})

</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    flex-direction: column;
    height: 550px;

    &-header {
        margin-bottom: 10px;
    }

    &-body {
        flex: 1 1 auto;
        overflow: auto;
    }

    &-footer {
        margin: 14px 0 0 0;
    }
}

.list-cell {
    border-radius: 8px;
    padding: 20px 10px;
    background-color: #f5f7fa;
    margin-bottom: 10px;
    border: 1px solid #f5f7fa;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease-in-out;

    .selete_img {
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
    }
}

.list-cell:hover {
    background-color: rgba(108, 159, 241, 0.2);
}

.active {
    background-color: rgba(108, 159, 241, 0.2);
}
</style>